<template>
	<view class="">
		<view class="top">
			<u-navbar :title="shoplist.f_shop_name" title-color="white" :title-size="35" :title-bold="true"
				:immersive="true" :background="background" :border-bottom="false"></u-navbar>
			<view class="top-img">
				<view class="top-box">
					<view class="shell-boxlf">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/icon/black.png"
							style="width: 100%; height: 100%;"></image>
					</view>
					<view class="box-lf">
						<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/shopimg.png"
							style="width: 100%; height: 100%;"></image>
					</view>
					<view class="box-cen">
						<view class="title">
							{{shoplist.f_address}}
						</view>
						<view class="hour">
							24小时营业
						</view>
						<view class="discount">
							<view class="discount-p" @click="discount(shoplist)">
								点击充值
							</view>
						</view>
						<!-- <view class="discount">
							<view class="discount-p">
								充300送50
							</view>
						</view> -->
					</view>
					<view class="box-rg">
						<view class="icon-box" @tap="call()">
							<view class="icon">
								<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/icon/mobile.png"
									style="width: 100%; height: 100%;"></image>
								<view class="icon-text">电话</view>
							</view>
						</view>
						<view class="icon-box" @click="openMap">
							<view class="icon">
								<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/icon/map.png"
									style="width: 100%; height: 100%;"></image>
								<view class="icon-text">到店</view>
							</view>
						</view>
					</view>
				</view>
				<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/oprntable.png" style="width: 100%; height:238rpx ;">
				</image>
			</view>
		</view>
		<view class="opentab-shell">
			<view class="opentab">
				<!-- 台球关闭台 -->
				<view class="opentab-item" v-for="(item,index) in ballList" v-if="!item.order"
					@click="beginbilliards(item.f_union_code,item)">
					<view class="item-lf" style="position: relative;">
						<view style="width: 200rpx; height: 60rpx; position: absolute;top:60rpx;">
							<view class="room">
								{{item.f_eq_no}}
							</view>
							<view class="tip">
								空闲中
							</view>
						</view>
						<view class="lf-img" v-if="item.f_eq_type==1">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/billiards-close.png"
								style="width: 100%; height:100% ;"></image>
						</view>
						<view class="lf-img" v-if="item.f_eq_type==2">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/chess-close.png"
								style="width: 100%; height:100% ;"></image>
						</view>
					</view>
					<view class="item-cen">
						<view class="title">
							{{item.f_eq_name}}
						</view>
						<view class="hour">
							<!-- 25元/60分钟 -->
						</view>
					</view>
					<view class="item-rg">
						<view class="openbtn">
							<view class="openbtn-p" v-if="item.f_eq_type==1">
								立即开台
							</view>
							<view class="openbtn-p" style="color: #D55B18;" v-if="item.f_eq_type==2">
								立即开台
							</view>
						</view>
					</view>
				</view>
				<!-- 台球开台 -->
				<view class="opentab-item" v-for="(item,index) in ballList" v-if="item.order">
					<view class="item-lf" style="position: relative;">
						<view style="width: 200rpx; height: 60rpx; position: absolute;top:60rpx;"
							v-if="item.f_eq_type==1">
							<view class="room" style="color: #0E6031;">
								{{item.f_eq_no}}
							</view>
							<view class="tip" style="color: #0E6031;">
								对局中
							</view>
						</view>
						<view style="width: 200rpx; height: 60rpx; position: absolute;top:60rpx;"
							v-if="item.f_eq_type==2">
							<view class="room" style="color: #D55B18;">
								{{item.f_eq_no}}
							</view>
							<view class="tip" style="color: #D55B18;">
								对局中
							</view>
						</view>
						<view class="lf-img" v-if="item.f_eq_type==1">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/billiards-open.png"
								style="width: 100%; height:100% ;"></image>
						</view>
						<view class="lf-img" v-if="item.f_eq_type==2">
							<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/chess-open.png"
								style="width: 100%; height:100% ;"></image>
						</view>
					</view>
					<view class="item-cen">
						<view class="title">
							{{item.f_eq_name}}
						</view>
						<view class="hour">
							<!-- 25元/60分钟 -->
						</view>
						<view class="opentable">
							已对局：{{item.order.long}}
						</view>
					</view>
					<view class="item-rg" style="width: 153rpx;padding-top: 50rpx;">
						<view class="header">
							<image :src="item.order.has_user.f_headimgurl"
								style="width: 100%;height: 100%; border-radius: 50%;">
							</image>
						</view>
						<view class="name">
							<view class="name-pp">{{item.order.has_user.f_nickName}}
							</view>
						</view>
					</view>
				</view>
				<view @click="couponlist(item)" style="width: 50px; height: 50px;position: fixed; top: 300px; left: 0px;
					display: flex; justify-content: center; align-items: center;">
					<image src="https://gongxiangtaiqiu.axa2.com/taiqiu/shopyouhui.png"
						style="width: 100%; height: 100%;">
					</image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#000000'
				},
				ballList: {},
				ballstatus: '',
				shoplist: {},
				equipment_id: '', //设备id
				shop_id: '', //商家id
				f_lon: '',
				f_lat: '',
				f_eq_status: '',
			};
		},
		onShow() {
			this.equipment()
		},
		onLoad(option) {
			this.shoplist = JSON.parse(option.item)
			this.shop_id = this.shoplist.id
			console.log('this.shoplist', this.shoplist)
			this.equipment()
			this.rule()
			//当前商家经纬度
			this.getShopInfo()
		},
		methods: {
			//充值页面
			discount(shoplist) {
				console.log(shoplist,'充值')
				uni.navigateTo({
					url: '/pagesB/rechargeAmount/rechargeAmount?id='+shoplist.id+'&name='+shoplist.f_shop_name
				})
			},
			//到店导航
			openMap() {
				// console.log("获取经纬度ssssfff", lon, lat);
				// 打开地图，并将门店位置传入
				uni.getLocation({
					success: res => {
						console.log(res, '我是res') //打印的是当前位置

						// res.latitude = this.f_lat;
						// res.longitude = this.f_lon;
						console.log('location success', parseFloat(this.f_lat), parseFloat(this
							.f_lon)) //打印的是当前位置
						uni.openLocation({
							latitude: parseFloat(this.f_lat),
							longitude: parseFloat(this.f_lon),
							scale: 18
						})
					}
				})
			},
			//当前商家经纬度
			getShopInfo() {
				this.$Api.getShopInfo({
					shopId: this.shop_id,
				}).then(res => {
					this.f_lon = res.data.data.f_lon
					this.f_lat = res.data.data.f_lat
					console.log(this.f_lon, this.f_lat, '当前商家经纬度')
				})
			},
			//设备列表
			equipment() {
				this.$Api.EqList({
					shopId: this.shop_id,
					page: 1,
					pageNum: 15

				}).then(res => {
					this.ballList = res.data.data
					// console.log(res.data.data, '设备列表')
				})
			},
			//根据设备获取规则 
			rule() {
				this.$Api.getEqRule({
					shopId: this.shop_id,
				}).then(res => {
					// console.log(res.data.data, '规则列表')
				})
			},
			call() {
				let phone = this.shoplist.f_phone
				uni.makePhoneCall({
					phoneNumber: phone,
					success: function() {
						console.log('拨打电话成功');
					},
					fail() {
						console.log('打电话失败了');
					}
				})
			},
			couponlist(item) {
				uni.navigateTo({
					url: '../discountsList/discountsList?id=' + this.shop_id
				})
			},
			beginbilliards(code, item) {
				this.f_eq_status = item.f_eq_status
				console.log(item.f_eq_status, 'f_eq_status')
				if (this.f_eq_status == 0) {
					uni.showToast({
						title: '装修中',
						icon: "none"
					})
					return
				}
				uni.navigateTo({
					url: '../beginbilliards/beginbilliards?scene=' + code
				})
			}


		},
		mounted() {

		}
	}
</script>

<style lang="scss">
	.name-pp {
		width: 80px;
		height: 22px;
		display: flex;
		justify-content: center;
		margin: auto;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		align-items: center;
	}

	.top {
		width: 100%;
		height: auto;
		background-color: #000000;
		padding-top: 200rpx;

		.top-img {
			width: 713rpx;
			height: 246rpx;
			margin: auto;
			position: relative;

			.top-box {
				width: 650rpx;
				height: 120rpx;
				position: absolute;
				left: 20rpx;
				bottom: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				.shell-boxlf {
					width: 60px;
					height: 60px;
					position: relative;

				}

				.box-lf {
					width: 100rpx;
					height: 100rpx;
					border: 2rpx solid #FFFFFF;
					border-radius: 16rpx;
					position: absolute;
					left: 4px;
					top: 5px;
				}

				.box-cen {
					width: 330rpx;
					height: 100rpx;
					margin-left: 20rpx;

					.title {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
						width: 340rpx;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.hour {
						width: 160rpx;
						height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #4C6B5A;
						margin-top: 10rpx;
					}

					.discount {
						width: 168rpx;
						height: 32rpx;
						border: 1px solid #F9AF29;
						border-radius: 4rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;
						// display: inline-block;
						// margin-right: 10rpx;

						.discount-p {
							width: 108rpx;
							// height: 18rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #F9AF29;
							// margin: auto;
							display: flex;
							    justify-content: center;
							    align-items: center;
						}
					}
				}

				.box-rg {
					width: 200rpx;
					height: 100rpx;
					display: flex;
					justify-content: center;

					// align-items: center;
					.icon-box {
						width: 90rpx;
						height: 55rpx;
						display: flex;
						justify-content: center;
						align-items: center;

						.icon {
							width: 36rpx;
							height: 36rpx;

							.icon-text {
								width: 50rpx;
								font-size: 22rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #4C6B5A;
							}
						}

					}

				}
			}
		}
	}

	.opentab-shell {
		width: 100%;
		height: 1233rpx;
		background: #000000;

		.opentab {
			width: 749rpx;
			// height: 1233rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 0px 0px;
			margin-top: -9rpx;

			.opentab-item {
				width: 680rpx;
				height: 200rpx;
				border-bottom: 1px solid #EEEEEE;
				margin: auto;
				display: flex;
				justify-content: center;
				align-items: center;

				.item-lf {
					width: 220rpx;
					height: 200rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					.room {
						display: flex;
						justify-content: center;
						// width: 70rpx;
						height: 40rpx;
						font-size: 36rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
						margin: auto;
					}

					.tip {

						width: 73rpx;
						height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #FFFFFF;
						margin: auto;
					}

					.lf-img {
						width: 190rpx;
						height: 120rpx;
						background-color: #b9e1ff;
					}
				}

				.item-cen {
					width: 300rpx;
					height: 200rpx;

					.title {
						width: 250rpx;
						height: 25rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
						margin-top: 37rpx;
					}

					.hour {
						width: 160rpx;
						height: 23rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						margin-top: 20rpx;

					}

					.opentable {
						width: 200rpx;
						height: 21rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #F9AF29;
						margin-top: 30rpx;
					}

					.discount {
						width: 90rpx;
						height: 32rpx;
						border: 1px solid #F9AF29;
						border-radius: 4rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 20rpx;
						display: inline-block;
						margin-right: 10rpx;


						.discount-p {
							width: 60rpx;
							// height: 18rpx;
							font-size: 20rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #F9AF29;
							margin: auto;
						}
					}
				}

				.item-rg {
					// width: 180rpx;
					height: 200rpx;

					.header {
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin: auto;
					}

					.name {
						width: auto;
						height: 21rpx;
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
						padding-top: 10rpx;
						margin: auto;
						display: flex;
					}

					.yuding {
						width: 105rpx;
						height: 35rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #222222;
						line-height: 40rpx;
						// margin-top: 50rpx;
						// display: inline;
					}

					.openbtn {
						width: 150rpx;
						height: 58rpx;
						background: #222222;
						border-radius: 29rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						margin-top: 80rpx;

						.openbtn-p {
							// width: 95rpx;
							// height: 23rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #02FF83;
						}
					}
				}

			}
		}
	}
</style>